<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>{$Think.config.site.title} - 商户管理</title>
    <meta name="keywords" content="{$Think.config.site.keywords}">
    <meta name="description" content="{$Think.config.site.description}">
    <link href="{$Think.config.site.resource_url}css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/animate.min.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/plugins/chosen/chosen.css" rel="stylesheet">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="{$Think.config.site.resource_url}js/assets/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>传递事件参数</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        .el-upload__input{
            display: none !important;
        }

        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }

        p {
            width: 603px;
            padding-top: 3px;
            overflow: hidden;
        }

        #container {
            min-width: 603px;
            min-height: 767px;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
</head>
<body>
    <div class="wrapper wrapper-content animated fadeInRight">
        <form method="post" class="form-horizontal" action="" id="myformdata" enctype="multipart/form-data">
            <div class="row" id="app">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins" style="margin-top:50px;">
                        <div class="ibox-content">
                            <input type="hidden" name="id" value="{$info.id|default=''}">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('商户名称')}</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" name="name" maxlength="30" value="{$info.name|default=''}" required placeholder="{:lang('输入')}{:lang('商户名称')}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('联系人')}</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" name="contacts" maxlength="20" value="{$info.contacts|default=''}" required placeholder="{:lang('输入')}{:lang('联系人')}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('绑定手机电话')}</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" name="mobile" maxlength="20" value="{$info.mobile|default=''}" required placeholder="{:lang('输入')}{:lang('绑定手机电话')}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('佣金比例')}</label>
                                <div class="col-sm-7">
                                    <i style="font-weight: bold;color:red;font-style: normal">
                                        {:lang('请输入分成给商户比例，必须大于1并小于100的整数,单位%')}
                                    </i>
                                    <input type="text" class="form-control"  name="brokerage" value="{$info.brokerage|default=''}" maxlength="3" required placeholder="{:lang('输入')}{:lang('佣金比例')}">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('设置单价')}</label>
                                <div class="col-sm-7">
                                    <i style="font-weight: bold;color:red;font-style: normal">
                                        {:lang('设置单价价格，单位（小时）')}
                                    </i>

                                    <input type="text" class="form-control" name="per_price" value="{$info.per_price|default=''}" maxlength="10" required placeholder="{:lang('输入')}{:lang('设置单价')}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('归属代理')}</label>
                                    <div class="col-sm-7">
                                    <select data-placeholder="归属代理......" class="agency  form-control" id='agency' style="width:150px;float:left" name="agency" tabindex="2">
                                        <option value="">{:lang('归属代理')}</option>
                                        {volist name="agent" id="vo"}
                                        <option value="{$vo.id}" hassubinfo="true" <?php if(isset($info['agency'])){ if($vo['id']==$info['agency']){ echo "selected = 'selected'";}} ?>>{$vo.agent_name}</option>
                                        {/volist}
                                    </select>
                                <?php foreach($sales as $agent_id => $val):  ?>
                                <label>
                                    <select <?php if(isset($info['agency']) && $agent_id == $info['agency']) {echo "style='display:block'";} else {echo "style=display:none";}?> data-placeholder="归属地推......" class="form-control" id='sales_<?php echo $agent_id;?>' name="salesman" style="width:150px;float:left;margin-left:20px;" tabindex="2">
                                        <option value="">{:lang('归属地推')}</option>
                                        <?php foreach($val as $vo): ?>
                                        <option value="{$vo.id}" hassubinfo="true" <?php if(isset($info['salesman'])){ if($vo['id']==$info['salesman']){ echo "selected = 'selected'";}} ?>>{$vo.agent_name}</option>
                                        <?php endforeach; ?>
                                    </select>
                                </label>
                                <?php endforeach;?>
                                    </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('用户状态')}</label>
                                <label class="col-sm-7">
                                    <select data-placeholder="选择代理商状态" class="chosen-select  form-control" id='status' name="status" style="width:150px;" tabindex="2">
                                        <option value="">{:lang('选择状态')}</option>
                                        {volist name="status" key="kk" id="vo"}
                                        <option value="{$kk}" hassubinfo="true" <?php if (!empty($info['status']) && $kk == $info['status']) echo "selected";?>>{$vo}</option>
                                        {/volist}
                                    </select>
                                </label>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('商户门店照')}</label>
                                <div class="col-sm-7" >
                                    <el-upload name="img_file" value="fileList2" class="upload-demo" action="/ausadmin/Seller/file_upload" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :file-list="fileList2" :on-error="handleError" :limit="3"  list-type="picture">
                                        <el-button size="small" type="primary" class="fl">点击上传</el-button>
                                        <div slot="tip" class="el-upload__tip load_notice" style="font-weight: bold;color:red">
                                            {:lang('只能上传jpg/png文件，且不超过2M')}
                                        </div>
                                    </el-upload>
                                </div>
                            </div>
                            <input type="hidden" id="picture" name="picture" value="{$picture|default=''}">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('门店地址')}</label>

                                    <div class="col-sm-7">
                                    <select data-placeholder="选择省份......" class="province  form-control" id='province' name="province" style="width:150px;float:left;" tabindex="2">
                                        <option value="">{:lang('选择省份')}</option>
                                        {volist name="province" id="vo"}
                                        <option value="{$vo.addr_id}" <?php if(isset($info['province'])){ if($vo['addr_id']==$info['province']){ echo "selected = 'selected'";}} ?>>{$vo.addr_name}</option>
                                        {/volist}
                                    </select>
                                <?php foreach($city as $province_id=>$val){  ?>
                                    <select <?php if(isset($info['province']) && $province_id == $info['province']) {echo "style=display:block;width:150px;float:left";} else {echo "style=display:none;width:150px;float:left";}?> data-placeholder="选择城市......" class="form-control" id='city_<?php echo $province_id;?>' name="city" tabindex="2">
                                        <option value="">{:lang('选择城市')}</option>
                                        <?php foreach($val as $v){ ?>
                                        <option value="{$v.addr_id}" hassubinfo="true" <?php if(isset($info['city'])){ if($v['addr_id']==$info['city']){ echo "selected = 'selected'";}} ?>><?php echo $v['addr_name'] ?></option><?php }?>
                                    </select>
                                <?php }?>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('详细地址')}</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" id="addr" name="addr" value="{$info.addr|default=''}" maxlength="50" required placeholder="{:lang('输入')}{:lang('详细地址')}">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('地图定位')}</label>
                                <div class="col-sm-7">
                                    <input type="button" class="form-control" data-val="show" id="show_map" style="width:110px;height:35px;" value="{:lang('显示地图')}">
                                    <div id="search_map" style="display:none;">
                                        <input id="region" type="textbox" value="" placeholder="请输入搜索地址" class="form-control">
                                    <input id="keyword" type="textbox" value="" placeholder="请输入关键字" class="form-control">
                                    <input id="pageIndex" type="textbox" value="0" style="width:30px">每页结果数:
                                    <input id="pageCapacity" type="textbox" value="5" style="width:30px">
                                    <input type="button" value="搜索" onclick="searchKeyword()">
                                    </div>
                                </div>


                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"></label>
                                <div class="col-sm-9" >
                                <div id="container" style="display:none">
                                </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('经度')}</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control"  name="longitude" id="longitude" value="{$info.longitude|default=''}" placeholder="{:lang('输入')}{:lang('经度')}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('纬度')}</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control"  name="latitude" id="latitude" value="{$info.latitude|default=''}" placeholder="{:lang('输入')}{:lang('纬度')}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('营业时间')}</label>
                                <div class="col-sm-7">
                                    <el-time-select
                                            placeholder="起始时间"
                                            name="shopstart"
                                            v-model="startTime"
                                            :picker-options="{
                                            start: '00:00',
                                            step: '00:30',
                                            end: '24:00'
                                            }"
                                    >
                                    </el-time-select>
                                    <el-time-select
                                            placeholder="结束时间"
                                            name="shopend"
                                            v-model="endTime"
                                            :picker-options="{
                                            start: '00:00',
                                            step: '00:30',
                                            end: '24:00',
                                            }"
                                    >
                                    </el-time-select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('人均消费')}</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control"  name="averageprice" value="{$info.averageprice|default=''}" maxlength="10" placeholder="{:lang('输入')}{:lang('人均消费')}">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">{:lang('商户电话')}</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" name="phone" id="phone" value="{$info.phone|default=''}" maxlength="20" placeholder="{:lang('输入')}{:lang('商户电话')}">
                                </div>
                            </div>


                        </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <div class="col-sm-5 col-sm-offset-5">
                            <input type="button" class="btn btn-primary" value="{:lang('提交')}" id="onbtn">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
<script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>
<script src="{$Think.config.site.resource_url}js/bootstrap.min.js?v=3.3.5"></script>
<script src="{$Think.config.site.resource_url}js/plugins/validate/jquery.validate.min.js"></script>
<script src="{$Think.config.site.resource_url}js/plugins/layer/layer.js"></script>
<script src="{$Think.config.site.resource_url}js/plugins/validate/messages_zh.min.js"></script>

    <script>
    var searchService, markers = [];
    var init = function () {
        var map = new qq.maps.Map(document.getElementById("container"), {
            center: new qq.maps.LatLng(24.465901, 118.118820),
            zoom: 13
        });
        //绑定单击事件添加参数
        qq.maps.event.addListener(map, 'click', function (event) {
            //alert('您点击的位置为: [' + event.latLng.getLat() + ', ' +
            //    event.latLng.getLng() + ']');
            $('#longitude').val(event.latLng.getLng());
            $('#latitude').val(event.latLng.getLat());
        });

        //设置Poi检索服务，用于本地检索、周边检索
        searchService = new qq.maps.SearchService({
            //检索成功的回调函数
            complete: function (results) {
                //设置回调函数参数
                var pois = results.detail.pois;
                var infoWin = new qq.maps.InfoWindow({
                    map: map
                });
                var latlngBounds = new qq.maps.LatLngBounds();
                for (var i = 0, l = pois.length; i < l; i++) {
                    var poi = pois[i];
                    //扩展边界范围，用来包含搜索到的Poi点
                    latlngBounds.extend(poi.latLng);

                    (function (n) {
                        var marker = new qq.maps.Marker({
                            map: map
                        });
                        marker.setPosition(pois[n].latLng);

                        marker.setTitle(i + 1);
                        markers.push(marker);


                        qq.maps.event.addListener(marker, 'click', function () {
                            infoWin.open();
                            infoWin.setContent('<div style="width:280px;height:100px;">' + 'POI的ID为：' +
                                pois[n].id + '，POI的名称为：' + pois[n].name + '，POI的地址为：' + pois[n].address + '，POI的类型为：' + pois[n].type + '</div>');
                            infoWin.setPosition(pois[n].latLng);
                        });
                    })(i);
                }
                //调整地图视野
                map.fitBounds(latlngBounds);
            },
            //若服务请求失败，则运行以下函数
            error: function () {
                alert("出错了。");
            }
        });
    }

    //清除地图上的marker
    function clearOverlays(overlays) {
        var overlay;
        while (overlay = overlays.pop()) {
            overlay.setMap(null);
        }
    }
    //设置搜索的范围和关键字等属性
    function searchKeyword() {
        var keyword = document.getElementById("keyword").value;
        var region = document.getElementById("region").value;
        var pageIndex = parseInt(document.getElementById("pageIndex").value);
        var pageCapacity = parseInt(document.getElementById("pageCapacity").value);
        clearOverlays(markers);
        //根据输入的城市设置搜索范围
        searchService.setLocation(region);
        //设置搜索页码
        searchService.setPageIndex(pageIndex);
        //设置每页的结果数
        searchService.setPageCapacity(pageCapacity);
        //根据输入的关键字在搜索范围内检索
        searchService.search(keyword);
        //根据输入的关键字在圆形范围内检索
        //var region = new qq.maps.LatLng(39.916527,116.397128);
        //searchService.searchNearBy(keyword, region , 2000);
        //根据输入的关键字在矩形范围内检索
        //region = new qq.maps.LatLngBounds(new qq.maps.LatLng(39.936273,116.440043),new qq.maps.LatLng(39.896775,116.354212));
        //searchService.searchInBounds(keyword, region);
    }


</script>
<script>
    var Main = {
        data() {
            return {
                fileList2: {$all_img},
                startTime:"{$info.shopstart|default=''}",
                endTime:"{$info.shopend|default=''}"
                // fileList2: [{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
            };
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleSuccess(response, file, fileList) {
                var data = [];
                for( var i = 0; i < fileList.length; i++){
                    data[i] = fileList[i].response.url;
                }
                data = data.join(',');
                $('#picture').val(data);
            },
            handleError(err, file, fileList) {
                console.log(err)
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

$(document).ready(function(){

	$('#show_map').click(function(){
        val = $(this).attr('data-val');
        if(val == "show"){
            $(this).attr('data-val','hide');
            $('#container').show();
            $('#search_map').show();
            init();
        }else{
            $(this).attr('data-val','show');
            $('#container').hide();
            $('#search_map').hide();
        }
	});

	$('.province').change(function(){
       val = $(this).val();
       $("[id^=city_]").hide();
       $("[id^=city_]").attr("name","");
       $('#city_'+val).attr("name","city");
       $('#city_'+val).show();
	});

    $('.agency').change(function(){
       val = $(this).val();
       $("[id^=sales_]").hide();
       $("[id^=sales_]").attr("name","");
       $('#sales_'+val).attr("name","salesman");
       $('#sales_'+val).show();
	});

	$('#onbtn').click(function(){
//        var name = $('#name').val();
//        var phone = $('#phone').val();
//        var area = $('#area').val();
//        if(name==''){
//            $('#name').focus();
//            return false;
//        }
//        if(phone==''){
//            $('#phone').focus();
//            return false;
//        }
//        if(area==''){
//            $('#area').focus();
//            return false;
//        }

		//var fomrData = $("#myformdata").serialize();
        var formData = new FormData($( "#myformdata" )[0]);
		var action = 'add';
		$.ajax({
			type : 'POST',
			url : '<?php echo \think\Request::instance()->root(); ?>/ausadmin/Seller/'+action,
			data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
			success : function(result) {
                //layer.close(layer1);
                if(0 === result.code) {
                    layer.msg(result.msg, {icon: 1});
                    parent.location.reload();
                }  else  {
                    //删除失败
                    layer.msg(result.msg, {icon: 5});
                }
            },
            error : function(){
                res = false;
                layer.msg("{:lang('服务器错误！请稍后重试')}", {icon: 2});
            }
		})
	});
})

</script>
</html>

